<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="leftSpan">
        <el-card class="left-content" :style="{'height': height}">
          <div class="icon">
            <div  @click="handleCloseIcon" class="Icon">
              <el-icon :class="{'el-icon-minus': isShowPlus, 'el-icon-circle-plus-outline': isShowMins}"></el-icon>
            </div>
          </div>
          <el-tree
            :props="props"
            :load="loadNode"
            lazy
            show-checkbox
            @check-change="handleCheckChange"
          />
        </el-card>
      </el-col>
      <el-col :span="rightSpan">
        <el-card class="box-card">
          <!--      form -----content-->
          <div>
            <div class="form-content">
              <el-form :inline="true" :model="form" class="demo-form-inline" label-suffix=":">
                <el-form-item label="日期">
                  <el-date-picker v-model="form.dateTime" value-format="timestamp" placeholder="请选择时间" />
                </el-form-item>
                <el-form-item class="marginLeft">
                  <el-button type="primary" icon="el-icon-search" class="button" @click="handelSearch" />
                </el-form-item>
<!--                <el-form-item label="排序字段：" class="marginLeft" style="margin-left: 20px">-->
<!--                  <el-input v-model="form.typeOfWork" placeholder="请输入排序字段" />-->
<!--                </el-form-item>-->
<!--                <el-form-item label="排序方式：" class="marginLeft">-->
<!--                  <el-input v-model="form.typeOfWork" placeholder="请输入排序方式" />-->
<!--                </el-form-item>-->
<!--                <el-form-item class="marginLeft">-->
<!--                  <el-button type="primary" class="button" icon="el-icon-search" @click="handelSearch">查询</el-button>-->
<!--                </el-form-item>-->
              </el-form>
            </div>
          </div>
          <!--      end --- form-->
          <el-divider />
          <!--      table-content-->
          <div class="table-content">
            <el-table
              ref="multipleTable"
              v-loading="loading"
              :data="tableData"
              tooltip-effect="dark"
              fixed
              border
              style="width: 100%"
            >
<!--              <el-table-column-->
<!--                label="回路名称"-->
<!--                align="center"-->
<!--                width="140"-->
<!--                prop="r_name"-->
<!--              />-->

              <el-table-column
                label="数据名称"
                align="center"
                prop="title"
                width="120"
              />
              <el-table-column
                prop="valNum"
                label="电压值"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{scope.row.valNum ? scope.row.valNum + scope.row.unit : '-'}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="reportTime"
                label="时间"
                align="center"
                show-overflow-tooltip
              />
            </el-table>
<!--            <div class="pagination-container">-->
<!--              <el-pagination-->
<!--                background-->
<!--                layout="total, sizes, prev, pager, next, jumper"-->
<!--                :total="pagination.total"-->
<!--                :current-page="pagination.pageNum"-->
<!--                :page-size="pagination.pageSize"-->
<!--                @size-change="handlePaginationSizeChange"-->
<!--                @current-change="handleCurrentChange"-->
<!--              />-->
<!--            </div>-->
            <Pagination
              :page="pagination.pageNum"
              :limit="pagination.pageSize"
              :total="total"
              @pagination="handlePagination"
            ></Pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getList } from '@/api/table'
import Pagination from '@/components/Pagination'
export default {
  name: 'Index',
  components: {
    Pagination
  },
  data() {
    return {
      sign: true,
      leftSpan: 4,
      rightSpan: 20,
      height: '300px',
      isShowPlus: true,
      isShowMins: false,
      loading: false,
      visible: false,
      form: {
        dateTime: ''
      },
      props: {
        label: 'name',
        children: 'zones'
      },
      count: 1,
      tableData: [],
      rowData: {},
      pagination: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  mounted() {
  },
  created() {
    // getList
    this.init()
  },
  watch: {
    // sign(newVal, oldVal) {
    //   if (newVal === false) {
    //     this.leftSpan = 4
    //     this.height = '300px'
    //     this.isShowPlus = true
    //     this.isShowMins = false
    //   }
    // }
  },
  methods: {
    init() {
      this.loading = true
      getList({
        pageSize: this.pagination.pageSize,
        pageNum: this.pagination.pageNum,
        dataTime: this.form.dateTime || ''
      }).then(res => {
        this.loading = false
        console.log(res.data)
        this.tableData = res.data.data
        this.total = res.data.recordCounts
      })
    },
    handleCloseIcon() {
      // this.leftSpan = 1
      // this.height = '50px'
      // this.isShowPlus = false
      // this.isShowMins = true
      // this.sign = !this.sign
    },
    handelSearch() {
      this.init()
      // getList(this.form).then(res => {
      //   console.log(res.data)
      //   this.tableData = res.data.data
      // })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex, columnIndex)
      const length = this.tableData.length
      if (columnIndex === 0) {
        if (rowIndex % length === 0) {
          return {
            rowspan: length,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    handlePagination({ page, limit }) {
      console.log(page)
      this.pagination.pageNum = page
      this.pagination.pageSize = limit
      this.init()
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    },
    handleNodeClick(data) {
      console.log(data)
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: '全部设备' }])
      }
      if (node.level > 1) return resolve([])

      let hasChild
      if (node.data.name === '全部设备') {
        hasChild = true
      } else {
        hasChild = false
      }

      let data
      if (hasChild) {
        data = [{
          name: '主进程柜'
        }, {
          name: '地源热泵空调总表'
        }, {
          name: '电容柜'
        }, {
          name: '新增分立柜总表'
        }, {
          name: '消防栓机械泵2路'
        }, {
          name: '一层南1APE2右一层北1APE1左'
        }, {
          name: '生活水泵2路一层弱电房'
        }, {
          name: '消防喷淋机械泵1'
        }, {
          name: '消防喷淋机械泵2'
        }]
      } else {
        data = []
      }

      resolve(data)
    }
  }
}
</script>

<style lang="scss" scoped>
  .left-content{
    transition: .3s linear;
    .icon{
      display: flex;
      justify-content: flex-end;
      .Icon{
        cursor: pointer;
      }
    }
  }
  .box-card{
    padding: 20px;
    .table-content{
      &::v-deep th{
        background-color: #01ADA8FF !important;
        color: #fff;
      }
      .pagination-container{
        width: 100%;
        text-align: right;
      }
    }
  }
</style>
